<template>
  <view class="bd t1">
    <view>
      <u-tabs-swiper
        ref="uTabs"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="isScroll"
        active-color="#18C7E1"
        bar-width="100"
        swiperWidth="750"
        class="bd"
      ></u-tabs-swiper>
    </view>
    <swiper
      :current="swiperCurrent"
      @transition="transition"
      disable-touch="true"
      @animationfinish="animationfinish"
      :style="{ height: windowHeight + 'px' }"
    >
      <swiper-item class="swiper-item">
        <view class="edit" @tap="goAddGraph">
          <u-icon name="edit-pen-fill" color="#fff" size="45"></u-icon>
        </view>
        <scroll-view
          scroll-y
          style="height: 100%; width: 100%"
          @scrolltolower="onreachBottom"
        >
          <growGraph1
            v-if="qxData.length"
            :qxData="qxData"
            @getGraph="getGraph"
          ></growGraph1>
          <view class="none_icon" v-else>
            <u-empty text="暂无记录" mode="list"> </u-empty>
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view
          scroll-x
          style="height: 100%; width: 100%"
          @scrolltolower="onreachBottom"
        >
          <growGraph2 v-if="show1" :qxData="qxData"></growGraph2>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view
          scroll-x
          style="height: 100%; width: 100%"
          @scrolltolower="onreachBottom"
        >
          <growGraph3 v-if="show2" :qxData="qxData"></growGraph3>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view
          scroll-x
          style="height: 100%; width: 100%"
          @scrolltolower="onreachBottom"
        >
          <growGraph4 v-if="show3" :qxData="qxData"></growGraph4>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import uCharts from "@/js_sdk/u-charts/u-charts/u-charts.js";
import growGraph1 from "./grow-graph1.vue";
import growGraph2 from "./grow-graph2.vue";
import growGraph3 from "./grow-graph3.vue";
import growGraph4 from "./grow-graph4.vue";
export default {
  components: {
    growGraph1,
    growGraph2,
    growGraph3,
    growGraph4,
  },
  data() {
    return {
      list: [
        {
          name: "记录列表",
        },
        {
          name: "身高曲线",
        },
        {
          name: "体重曲线",
        },
        {
          name: "BMI",
        },
      ],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      show1: false,
      show2: false,
      show3: false,
      isScroll: false,
      windowHeight: 800,
      qxData: [],
    };
  },
  watch: {
    current(newv) {
      if (newv == 1) {
        this.show1 = true;
        this.show2 = false;
        this.show3 = false;
      }
      if (newv == 2) {
        this.show1 = false;
        this.show2 = true;
        this.show3 = false;
      }
      if (newv == 3) {
        this.show1 = false;
        this.show2 = false;
        this.show3 = true;
      }
    },
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    getSysInfo() {
      let self = this;
      uni.getSystemInfo({
        success(res) {
          self.windowHeight = res.windowHeight;
        },
      });
    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    // 获取曲线数据
    getGraph() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/childrenInfo/getChildrenQx", {})
        .then(({ data: { data, code } }) => {
          uni.hideLoading();
          //console.log(data,code)
          if (code === 200) {
            self.qxData = data || [];
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    onBackPress(e) {
      uni.switchTab({
        url: "/pages/home/home",
      });
      return true;
    },
    onPullDownRefresh() {
      //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
      //console.log('refresh');
      setTimeout(function () {
        uni.stopPullDownRefresh(); //停止下拉刷新动画
      }, 1000);
      this.getGraph();
    },
    goAddGraph() {
      uni.navigateTo({
        url: "/pages/main/child/backlog/grow-graph2-add",
      });
    },
  },
  mounted() {
    this.getGraph();
    this.getSysInfo();
  },
};
</script>

<style lang="less">
.none_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}
.edit {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  background-color: #84e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 10%;
  bottom: 20%;
  z-index: 999;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>
